<template>
	<view class="container">
		<view class="un-top">
			<image :src="seckillList[zid].image" mode="scaleToFill"></image>
		</view>
	
		<view class="guess-section">
			<view 
				v-for="(item, index) in seckillList[zid].data" :key="index"
				class="guess-item"
				@click="navToDetailPage(item)"
			>
				<view class="image-wrapper">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.title}}</text>
				<text class="tit2 title2 clamp">{{item.title2}}</text>
				<text class="price">￥{{item.price}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		components: {
		},
		data() {
			return {
				seckillList: [],
				zid:0,
				
			};
		},
		async onLoad(options) {
			//接受传值
			this.zid=options.id;
			console.log("44",options);
			console.log("55",options.id);
			this.loadData();
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {  
			async loadData() {
			let seckillList1 = await this.$api.json('seckillList');
			this.seckillList = seckillList1 || [];
			},
			//详情页
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.un-top{
		width: 100%;
		height: 360upx;
		padding: 10upx 0;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 80upx 50upx 0upx;
		background: #fff;
		.guess-item{
			
			display:flex;
			flex-direction: column;
			width: 45%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			margin-left: 85upx;
			width: 160upx;
			height: 160upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			margin-left: 40upx;
			font-size: $font-sm+1upx;
			color: $font-color-dark;
			line-height: 60upx;
		}
		.price{
			margin-left: 115upx;
			font-size: $font-sm;
			color: $uni-color-primary;
			line-height: 1;
			line-height: 50upx;
		}
		.tit2{
			margin-left: 40upx;
			font-size: $font-sm;
			color: $font-color-light;
			line-height: 30upx;
		}
	}
</style>
